<template>
  <div class="user">
    <query-form
      :queryFormItems="queryFormItems"
      @reset="resetQueryForm"
      @search="searchBtnClick"
    ></query-form>
    <query-table
      :tableConfig="userListTableConfig"
      pageName="users"
      ref="queryTableRef"
      tableHeight="420"
      @newBtnClick="addNewUser"
      @editBtnClick="editUser"
    >
      <template #createAt="scope">{{
        formatTime(scope.row.createAt)
      }}</template>
      <template #updateAt="scope">{{
        formatTime(scope.row.updateAt)
      }}</template>
      <template #enable="scope">
        <el-tag v-if="scope.row.enable === 1" type="success">启用</el-tag>
        <el-tag v-else type="danger">禁用</el-tag>
      </template>
    </query-table>
    <page-dialog
      :dialogFormItems="newDialogFormItems"
      :title="dialogTitle"
      :dialogFormConfig="dialogFormConfig"
      :defaultInfo="defaultInfo"
      pageName="users"
      ref="dialogRef"
    ></page-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from "vue";
import { useStore } from "@/store";
import QueryForm from "@/components/query-form";
import {
  queryFormItems,
  userListTableConfig,
  dialogFormItems,
  dialogFormConfig
} from "./config/config";
import QueryTable from "@/components/query-table";
import { useSearchHook } from "@/hooks/useSearchHook";
import PageDialog from "@/components/page-dialog";
import { useEditAndNewUser } from "@/hooks/useHandleDialog";

export default defineComponent({
  name: "user",
  components: {
    QueryForm,
    QueryTable,
    PageDialog
  },
  setup() {
    const store = useStore();
    // 查询
    const [queryTableRef, resetQueryForm, searchBtnClick] = useSearchHook();
    /* 新建、编辑 */
    const dialogTitle = ref("新建用户");
    // 隐藏密码input
    const hiddenPasswordInput = () => {
      dialogTitle.value = "编辑用户";
      const passwordItem = dialogFormItems.find(
        (item) => item.param === "password"
      );
      passwordItem!.isHidden = true;
    };
    // 显示密码input
    const showPasswordInput = () => {
      dialogTitle.value = "新建用户";
      const passwordItem = dialogFormItems.find(
        (item) => item.param === "password"
      );
      passwordItem!.isHidden = false;
    };
    const [defaultInfo, dialogRef, addNewUser, editUser] = useEditAndNewUser(
      showPasswordInput,
      hiddenPasswordInput
    );
    // 获取select选择器选项
    const newDialogFormItems = computed(() => {
      const depOptions = store.state.departmentOptions;
      const roleOptions = store.state.rolesOptions;
      dialogFormItems.forEach((item) => {
        if (item.param === "roleId") {
          item.selectOptions = roleOptions;
        }
        if (item.param === "departmentId") {
          item.selectOptions = depOptions;
        }
      });
      return dialogFormItems;
    });

    return {
      queryFormItems,
      userListTableConfig,
      resetQueryForm,
      searchBtnClick,
      queryTableRef,
      dialogFormItems,
      defaultInfo,
      addNewUser,
      dialogRef,
      editUser,
      newDialogFormItems,
      dialogTitle,
      dialogFormConfig
    };
  }
});
</script>

<style scoped lang="less"></style>
